<template>
  <el-dialog
    :visible.sync="dialog"
    top="15vh"
    :close-on-click-modal="false"
    destroy-on-close
    append-to-body
    title="返利设置"
    width="60%"
  >
    <!-- 搜索 -->
    <div class="head-container">
      <el-form ref="setRebateform" :model="setRebateform" label-width="auto" class="demo-dynamic">
        <el-row
          v-for="(domain, index) in setRebateform.domains"
          :key="domain.key"
          :gutter="20"
        >
          <el-col :span="10">
            <el-form-item
              :label="'充值区间：'"
              :required="true"
            >
              <el-col :span="11">
                <el-form-item
                  :prop="'domains.' + index + '.RechargeStart'"
                  :rules="{
                    required: true, message: '充值区间不能为空', trigger: 'blur'
                  }"
                >
                  <el-input v-model="domain.RechargeStart"><svg-icon slot="prefix" icon-class="money_yen" /></el-input>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item
                  :prop="'domains.' + index + '.RechargeEnd'"
                  :rules="{
                    required: true, message: '充值区间不能为空', trigger: 'blur'
                  }"
                >
                  <el-input v-model="domain.RechargeEnd"><svg-icon slot="prefix" icon-class="money_yen" /></el-input>
                </el-form-item>
              </el-col>

            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              :label="'返利区间：'"
              :required="true"
            > <el-col :span="11">
                <el-form-item
                  :prop="'domains.' + index + '.start'"
                  :rules="{
                    required: true, message: '返利区间不能为空', trigger: 'blur'
                  }"
                >
                  <el-input v-model="domain.start"><svg-icon slot="suffix" icon-class="percent" /></el-input>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item
                  :prop="'domains.' + index + '.end'"
                  :rules="{
                    required: true, message: '返利区间不能为空', trigger: 'blur'
                  }"
                >
                  <el-input v-model="domain.end"><svg-icon slot="suffix" icon-class="percent" /></el-input>
                </el-form-item>
              </el-col> </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button v-if="setRebateform.domains.length > 1" size="small" type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
            <el-button v-if="index == setRebateform.domains.length - 1" type="primary" size="small" @click="addDomain">新增</el-button>
          </el-col></el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm('setRebateform')">取 消</el-button>
        <el-button type="primary" @click="StartQuery('setRebateform')">查 询</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'

export default {
  name: 'SetRebate',
  mixins: [crud],
  data() {
    return {
      title: '输入玩家手机号',
      //  网站列表
      enabledTypeOptions: [
        { key: 'true', display_name: '成功' },
        { key: 'false', display_name: '失败' }
      ],
      setRebateform: {
        domains: [{
          value: ''
        }],
        email: ''
      }
    }
  },
  methods: {
    doInit() {
      this.$nextTick(() => {
        // this.init()
        console.log('crud.resetForm: ', crud)
      })
    },
    // 获取数据前设置好接口地址
    beforeInit() {
      this.url = 'api/jobs/logs'
      this.size = 6
      return true
    },
    // 异常详情
    info(errorInfo) {
      this.errorInfo = errorInfo
      this.errorDialog = true
    },
    // 获取接口
    StartQuery(formName) {
      //   crud.resetQuery()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('this.form: ', this.form)
          this.interiorDialog = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    submitForm(formName) {
      this.$refs[formName].resetFields()
      this.dialog = false
    },
    removeDomain(item) {
      var index = this.setRebateform.domains.indexOf(item)
      if (index !== -1) {
        this.setRebateform.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.setRebateform.domains.push({
        value: '',
        key: Date.now()
      })
    }

  }
}
</script>

<style scoped>

::v-deep .el-dialog__body {
    padding: 0 20px 10px 20px !important;
}
</style>

